<template>
  <div id="app">
    <table class="tb" border="1">
      <thead>
        欢迎光临_vue开发的收银系统_水果店
      </thead>
      <tbody>
        <tr>
          <td><strong>苹果 10 ￥ /斤，折扣 8 折 </strong></td>
        </tr>
        <tr>
          <td>请输入你要购买的斤数 <input type="number" v-model="val" /></td>
        </tr>
        <tr>
          <td><button @click="buy">结账买单~</button></td>
        </tr>
        <tr>
          <td>
            结账单：总价：{{ total }}￥元 折后价：{{ ze }}￥元 省了：{{
              sh
            }}￥元
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val: '',
      total: 0,
      ze: 0,
      sh: 0
    }
  },
  methods: {
    buy () {
      this.total = this.val * 10
      this.ze = this.val * 8
      this.sh = this.total - this.ze
    }
  }
}
</script>

<style scoped lang="less">
#app {
  width: 800px;
  margin: 50px auto;
}
.tb {
  width: 100%;
}
thead,
tbody {
  text-align: center;
}
</style>
